<template>
  <van-overlay :show="show" class="modal-wrapper">
    <div class="ex-modal">
      <div class="ex-modal__title">{{ t('skuSelector_exchange_reminder') }}</div>
      <div class="ex-modal__text">
        &nbsp; &nbsp;{{ t('skuSelector_msg_svip_buy', { title: svipTitle }) }}
      </div>
      <div class="ex-modal__footer-button" @click="handleClick">{{ t('skuSelector_know') }}</div>
    </div>
  </van-overlay>
</template>

<script>
import { Overlay } from "vant";
import Vue from "vue";
import locale from '../../mixins/locale'
Vue.use(Overlay);

export default {
  name: "ExPurchase",
  props: {
    svipTitle: {
      type: String,
      default: "",
    },
  },
  mixins: [locale],
  data() {
    return {
      show: true,
    };
  },
  methods: {
    // 点击换购按钮点击事件
    handleClick() {
      this.show = false;
      this.$emit("handleExPurchase", {
        name: 'showSvipModal',
        value: false
      });
      this.$emit("handleExPurchase", {
        name: 'isShowSvipModal',
        value: false
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.modal-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  z-index: 2100 !important; // 防止盖不住的情况出现
  .ex-modal {
    position: relative;
    width: 5.5769rem;
    height: 3.2692rem;
    padding: 0.4615rem 0.4615rem 0 0.4615rem;
    border-radius: 0.1538rem;
    border: 0 solid #979797;
    background: #fff;
    &__title {
      color: #333;
      font-size: 16px;
      font-weight: bolder;
      text-align: center;
    }
    &__text {
      padding: 0 0.4615rem;
      margin-top: 0.1538rem;
      color: #666;
      font-size: 14px;
    }
    &__footer-button {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 0.9231rem;
      border-top: 1px solid #ebebeb;
      display: inline-block;
      text-align: center;
      line-height: 0.9231rem;
      color: #1472ff;
      font-size: 16px;
    }
  }
}
</style>
